<template>
  <div class="box">
    <div class="form">
      <p class="check">
        <span @click="form1" :class="{ spanactive: num === 1 }">密码登录</span>
        <span @click="form2" :class="{ spanactive: num === 2 }">短信登录</span>
      </p>
      <div class="form1" v-show="num === 1">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          class="demo-ruleForm"
        >
          <el-form-item prop="username">
            <el-input
              :prefix-icon="User"
              v-model="ruleForm.username"
              placeholder="Username"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              show-password
              :prefix-icon="Lock"
              placeholder="Password"
              v-model="ruleForm.password"
              type="password"
            />
          </el-form-item>
          <el-form-item prop="yzm">
            <el-input
              v-model.number="ruleForm.yzm"
              :prefix-icon="Key"
              class="yzm"
              placeholder="验证码"
            />
            <img :src="img" alt="" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="form2" v-show="num === 2">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          class="demo-ruleForm"
        >
          <el-form-item prop="username">
            <el-input
              :prefix-icon="User"
              v-model="ruleForm.username"
              placeholder="手机号"
            />
          </el-form-item>
          <el-form-item prop="yzm">
            <el-input
              v-model.number="ruleForm.yzm"
              :prefix-icon="Lock"
              class="yzm"
              placeholder="验证码"
            />
            <img :src="img" alt="" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              class="yzm"
              :prefix-icon="Key"
              placeholder="短信验证码"
              v-model="ruleForm.password"
            />
            <span style="border: 1px solid #ccc; marginleft: 10px"
              >发送验证码</span
            >
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useCounterStore} from "../store/index";
import { getyzm, Login } from "../service/admin";
import { User, Lock, Key } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
let store =useCounterStore()
let router = useRouter();
const ruleFormRef = ref();
let num = ref(1);
let img = ref("");
let key = ref("");
onMounted(() => {
  getyzm().then((res) => {
    // console.log(res);
    img.value = res.data.img;
    key.value = res.data.key;
  });
});
function form1() {
  num.value = 1;
}
function form2() {
  num.value = 2;
}
const ruleForm = reactive({
  username: "",
  password: "",
  yzm: "",
});

const rules = reactive({
  username: [
    {
      required: true,
      message: "输入用户名",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "输入密码",
      trigger: "blur",
    },
  ],
  yzm: [
    {
      required: true,
      message: "输入验证码",
      trigger: "blur",
    },
  ],
});

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!", ruleForm);
      Login({
        captcha: ruleForm.yzm,
        key: key.value,
        username: ruleForm.username,
        password: ruleForm.password,
      }).then((res) => {
        console.log(res);
        if (res.data.message === "success") {
          ElMessage({
            message: "登录成功",
            type: "success",
          });
          store.setnavlist(res.data.context.acl);
          localStorage.setItem("Authorization",res.data.context.jwt);
          router.push("/dashboard");
        } else {
          ElMessage.error(res.data.errText);
          getyzm().then((res) => {
            // console.log(res);
            img.value = res.data.img;
            key.value = res.data.key;
          });
        }
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>

<style lang="scss" scoped>
.form {
  width: 300px;
  border: 1px solid gray;
  padding: 10px;
}
.el-button {
  width: 100%;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.yzm {
  width: 50%;
}
.check {
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  justify-content: space-around;
  height: 40px;
}
.spanactive {
  color: skyblue;
  border-bottom: 2px solid skyblue;
}
</style>
